<template>
	<scroll-view class="right-menu-detail" scroll-y="true">
		<!-- <view v-for="item in sortlist" :key="item.cat_id"> -->
		<view >
			<!-- 标题 -->
			<view class="detail-title">
				<!-- <image class="detail-title-icn" src=''></image> -->
				<view class="detail-title-left">
					<text class="detail-title-text">美容清洗</text>
				</view>
				
			</view>
			<!-- 商品 -->
			<view class="detail-content">
				<!-- <view class="detail-item" v-for="children in item.children" :key="children.cat_id"
					@click="Tourl(children.cat_id)"> -->
					<view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view>
			</view>
		</view><view >
			<!-- 标题 -->
			<view class="detail-title">
				<!-- <image class="detail-title-icn" src=''></image> -->
				<view class="detail-title-left">
					<text class="detail-title-text">美容清洗</text>
				</view>
				
			</view>
			<!-- 商品 -->
			<view class="detail-content">
				<!-- <view class="detail-item" v-for="children in item.children" :key="children.cat_id"
					@click="Tourl(children.cat_id)"> -->
					<view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view>
			</view>
		</view><view >
			<!-- 标题 -->
			<view class="detail-title">
				<!-- <image class="detail-title-icn" src=''></image> -->
				<view class="detail-title-left">
					<text class="detail-title-text">美容清洗</text>
				</view>
				
			</view>
			<!-- 商品 -->
			<view class="detail-content">
				<!-- <view class="detail-item" v-for="children in item.children" :key="children.cat_id"
					@click="Tourl(children.cat_id)"> -->
					<view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view>
			</view>
		</view><view >
			<!-- 标题 -->
			<view class="detail-title">
				<!-- <image class="detail-title-icn" src=''></image> -->
				<view class="detail-title-left">
					<text class="detail-title-text">美容清洗</text>
				</view>
				
			</view>
			<!-- 商品 -->
			<view class="detail-content">
				<!-- <view class="detail-item" v-for="children in item.children" :key="children.cat_id"
					@click="Tourl(children.cat_id)"> -->
					<view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view>
			</view>
		</view><view >
			<!-- 标题 -->
			<view class="detail-title">
				<!-- <image class="detail-title-icn" src=''></image> -->
				<view class="detail-title-left">
					<text class="detail-title-text">美容清洗</text>
				</view>
				
			</view>
			<!-- 商品 -->
			<view class="detail-content">
				<!-- <view class="detail-item" v-for="children in item.children" :key="children.cat_id"
					@click="Tourl(children.cat_id)"> -->
					<view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view><view class="detail-item">
					<image class="detail-image" src=""></image>
					<text class="detail-name">快速洗</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss">
	.right-menu-detail {
		width: 560rpx;
		background-color: #fff;
		height: 100vh;
	}
	
	.detail-title {
		width: 96%;
		height: 50rpx;
		color: #666;
		// display: flex;
		// align-items: center;
	 // justify-content: center; 
		font-size: 30rpx;
		background-color: #eeeeee;
		
		.detail-title-left{
			height: 50rpx;
			border-left: 10rpx solid #ff9100 ;
		 .detail-title-text{
				font-weight: 700;
				color: black;
				margin-left: 20rpx;
			}
		}
	}
	
	.detail-title-icn {
		width: 36rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
	
	.detail-content {
		overflow: hidden;
	}
	
	.detail-item {
		margin: 10rpx;
		width: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		float: left;
	}
	
	.detail-image {
		width: 120rpx;
		height: 120rpx;
		border: 1px solid red;
	}
	
	.detail-name {
		font-size: 25rpx;
		color: #999;
	}
</style>
